<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta charset='utf-8'>
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title>艺术家详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="stylesheet" type="text/css" href="css/page.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script>
	</head>

<style type="text/css">
* {
	margin:0; padding:0; border:0;
}
ul {
	list-style-type:none;
}
li {
	margin:10px;
	width:200px;
	border:4px double #ccc;
	background:#eee;
}
li .main,li .intro {
	margin:5px 5px 0 5px;
	font-size:12px;
}
li .main {
	height:25px;
	overflow:hidden;
	line-height:22px;
}
#main1 {
	height:380px;
}
li h3 {
	margin:0 5px 5px;
}
li p{
	margin:8px 0;
	font-size:14px;
	color:#111;
}
li .mainf {
	line-height:15px;
	font-size:12px;
	color:#333;
}
li .intro {
	padding:3px 0 0;
	color:#036;
	line-height:18px;
	border-top:1px dotted #366;
}
li .key {
	float:right;
	margin-top:-20px;
	color:#900;
	cursor:pointer;
}
</style>

<body>
<ul>
<li>
<div class="main" id="main1">
	<h3>孤雁儿</h3>
	<p class="mainf">世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。</p>
	<p>藤床纸帐朝眠起，
	<br />说不尽、无佳思。
	<br />沈香烟断玉炉寒，
	<br />伴我情怀如水。
	<br />笛声三弄，
	<br />梅心惊破，
	<br />多少春情意。</p>
	<p>小风疏雨萧萧地，
	<br />又催下、千行泪。
	<br />吹箫人去玉楼空，
	<br />肠断与谁同倚？
	<br />一枝折得，
	<br />人间天上，
	<br />没个人堪寄。</p>
</div>
<div class="intro">
	作者：李清照
	<span class="key" onclick="fn(this,1)">折叠</span>
</div>
</li>
<li>
<div class="main" id="main2">
	<h3>孤雁儿</h3>
	<p class="mainf">世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。</p>
	<p>藤床纸帐朝眠起，
	<br />说不尽、无佳思。
	<br />沈香烟断玉炉寒，
	<br />伴我情怀如水。
	<br />笛声三弄，
	<br />梅心惊破，
	<br />多少春情意。</p>
	<p>小风疏雨萧萧地，
	<br />又催下、千行泪。
	<br />吹箫人去玉楼空，
	<br />肠断与谁同倚？
	<br />一枝折得，
	<br />人间天上，
	<br />没个人堪寄。</p>
</div>
<div class="intro">
	作者：李清照
	<span class="key" onclick="fn(this,2)">展开</span>
</div>
</li>
</ul>
<script type="text/javascript">
var h = new Array(0,380,25,25,25);
var tf = new Array(false,true,false,false,false);
var minheight = 25;
var maxheight = 380;
function fn(likey,tag){
	if (tf[tag]){
		if (h[tag]>=minheight){
			document.getElementById("main"+tag).style.height = h[tag] + "px";
			setTimeout(function(){fn(likey,tag)},1);
			h[tag] -= 10;
		} else {
			likey.innerHTML = "展开";
			tf[tag] = !tf[tag];
			h[tag] += 10;
		}
	} else {
		if (h[tag]<=maxheight){
			document.getElementById("main"+tag).style.height = h[tag] + "px";
			setTimeout(function(){fn(likey,tag)},1);
			h[tag] += 10;
		} else {
			likey.innerHTML = "折叠";
			tf[tag] = !tf[tag];
			h[tag] -= 10;
		}
	}
}
</script>
</body>
</html>